<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华容道</title>
    <script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" href="huarongdao.css">
</head>
<body>
    <div class="titletext"><h2>华容道小游戏</h2></div>
    <div class="box">
    </div><!--游戏容器-->
    <div class="btnbox">
        <div class="time">0</div><!--计时展示区-->
        <div class="jieguo"></div><!--结果展示区-->
        <button id="btn"></button><!--开始结束按钮-->
    </div>
    <script>
        $(function (k) {
            let state = false;//初始化游戏状态true为在游戏，false为已结束或未开始
            let second = 0;//初始化游戏用时
            let itemWidth = 100;//初始化元素宽度
            let gongge = 9;//初始化宫格数量，默认九宫格
            let offset = 3;//元素偏移，用于界面展示
            var map = [];//地图数据变量
            function initMap(total) {//初始化地图
                gongge = total;
                let rowCount = Math.pow(total, 1 / 2);
                let colCount = rowCount;
                let itemHeight = itemWidth;
                for (var i = 0; i < rowCount; i++) {
                    map[i] = [];
                    for (var j = 0; j < colCount; j++) {
                        var eq = i * rowCount + j;//计算出当前UI元素的索引值
                        if (eq < total - 1) {
                            $('.box').append('<div class="sz">' + (eq + 1) + '</div>');
                        }
                        else {
                            $('.box').append('<div class="sz kong">' + '</div>');
                        }
                        map[i][j] = [i * itemWidth, j * itemWidth, eq + 1, eq + 1];//初始化地图记录每个数字的坐标当前数值，正确数值 map[i][j]=[0,0,3,1],表示x=0,y=0,当前显示为3,正确数值为1
                        //元素UI定位展示
                        $('.box .sz').eq(eq).css("top", map[i][j][0] + offset);
                        $('.box .sz').eq(eq).css("left", map[i][j][1] + offset);

                    }
                }
            }

            
            function move(total) {
                let rowCount = Math.pow(total, 1 / 2);
                let colCount = rowCount;
                let currnum = 0;
                let winnum = 0;
                let index = 0;
                if (state) {
                    $(".box .sz").click(function (e) {
                        currnum = parseInt($(this).text() == '' ? gongge : $(this).text());
                        if (currnum == gongge) return;
                        Spance = findNum(total, gongge);//找到空位的地图信息
                        curr = findNum(total, currnum);//找到当前数字的地图信息
                        //判断当前数字是否可以移动到空位如果满足条件点击移动
                        if (Spance[0] == curr[0] && Math.abs(Spance[1] - curr[1]) == itemWidth || Spance[1] == curr[1] && Math.abs(Spance[0] - curr[0]) == itemWidth) {
                            let tmp = Spance[2];
                            Spance[2] = curr[2];
                            curr[2] = tmp;
                            DrowUI(total);
                            CheckWin(total);
                        }
                    })
                }
            }
            //查找某数字的地图信息
            function findNum(total, currnum) {
                let rowCount = Math.pow(total, 1 / 2);
                let colCount = rowCount;
                for (let x = 0; x < rowCount; x++) {
                    for (let y = 0; y < colCount; y++) {
                        if (map[x][y][2] == currnum) {
                            return map[x][y];
                        }
                    }
                }
            }
            //初始化界面
            function initUI() {
                let rowCount = Math.pow(gongge, 1 / 2);
                $("#btn").text("开始");
                $(".box").width(rowCount * itemWidth);
                $(".box").height(rowCount * itemWidth);
            }
            //判断是否完成游戏
            function CheckWin(total) {
                let rowCount = Math.pow(total, 1 / 2);
                let colCount = rowCount;
                let itemWidth = 100;
                let itemHeight = itemWidth;
                let wincount = 0;
                for (var i = 0; i < rowCount; i++) {
                    for (var j = 0; j < colCount; j++) {
                        if (map[i][j][2] == map[i][j][3]) {
                            wincount++;
                        }
                    }
                }
                if (wincount == total) {//完成游戏条件，每个地图里的当前数字等于正确数字
                    Stop(true);
                }
            }
            //每次移动后的界面绘制
            function DrowUI(total) {
                let rowCount = Math.pow(total, 1 / 2);
                let colCount = rowCount;
                let itemHeight = itemWidth;
                for (var i = 0; i < rowCount; i++) {
                    for (var j = 0; j < colCount; j++) {
                        var eq = map[i][j][2] - 1;
                        $('.box .sz').eq(eq).css("top", map[i][j][0] + offset);
                        $('.box .sz').eq(eq).css("left", map[i][j][1] + offset);

                    }
                }
            }
            var t = null;
            //乱序数字顺序开始游戏时触发
            function DoRandom(total) {
                let i = 0;
                while (i < total) {
                    let rowCount = Math.pow(total, 1 / 2);
                    let colCount = rowCount;
                    let x = Math.floor(Math.random() * rowCount);
                    let y = Math.floor(Math.random() * colCount);
                    let x1 = Math.floor(Math.random() * rowCount);
                    let y1 = Math.floor(Math.random() * colCount);
                    let tmp = 0;
                    tmp = map[x][y][2];
                    map[x][y][2] = map[x1][y1][2];
                    map[x1][y1][2] = tmp;
                    i++;
                }
            }
            //开始游戏的一些设置
            function Start(total) {
                DoRandom(total);
                DrowUI(total);
                state = true;
                move(total);
                $("#btn").text("结束");
                t = setInterval(function () {
                    if (state) {
                        second++;
                    }
                    $(".btnbox .time").text(second + 'S');
                }, 1000);
                CheckWin(total);
            }
            //游戏结束时的一些设置
            function Stop(win) {
                if (win) {
                    $(".btnbox .jieguo").text("恭喜过关！用时：" + second + "S");
                }
                else {
                    $(".btnbox .jieguo").text("很遗憾，没有完成！用时：" + second + "S");
                }
                $("#btn").text("开始");
                $(".box .sz").off('click');
                state = false;
                clearInterval(t);
                second = 0;
                $(".btnbox .time").text(second);
                t = null;
            }
            $("#btn").click(function () {
                if (state) {
                    Stop();
                }
                else {
                    Start(gongge);
                }
            })
            initMap(16);//这里的数字用于切换宫格数量，可以为9,16,25,36,49,64  可以修改程序让界面上点击或输入难易重构界面
            initUI();
        })
    </script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script>
        document.write(returnCitySN["cip"]+','+returnCitySN["cname"])
        document.write('宽度='+document.body.clientWidth+','+'高度='+document.body.clientHeight)
        
    </script>
</body>
</html>